<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #333;
        overflow: hidden;
    }
    #canvas{
        position: fixed;
        left: 0;
        top:0;
    }
</style>
<body>
    <canvas id="canvas">

    </canvas>
</body>
<script>
    var canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    var ctx = canvas.getContext("2d");
    var particlesArray = []
    var count = parseInt(canvas.height /100 * canvas.width/100)
    var scale = window.innerWidth / window.innerHeight;
    var ov = 2;
    function Particle(x,y){
        this.x = x
        this.y = y
        this.directionX =  Math.random() * ov - ov /2;
        this.directionY = Math.random() * ov / scale - 1 / scale / ov;
        this.growth = (Math.abs(this.directionX) + Math.abs(this.directionY)) * 0.003;
        this.size = 0;
    }
    Particle.prototype.update = function(){
        this.y += this.directionY
            this.x += this.directionX
            this.size += this.growth;
    }
    Particle.prototype.draw = function(){
        ctx.beginPath()
            ctx.arc(this.x,this.y,this.size,0,Math.PI*2)
            ctx.fillStyle = "white";
            ctx.fill()
    }
    function createParticle() {
        var x = canvas.width/2;
        var y = canvas.height/2;
        particlesArray.push(new Particle(x,y))
    }

    function handleParticle() {
        for(var i=0;i<particlesArray.length;i++){
            var particle = particlesArray[i]
            particle.update()
            particle.draw()
            if (particle.x < 0 || particle.x > canvas.width || particle.y < 0 || particle.y > canvas.height) {
                particlesArray.splice(i, 1)
            }
        }
    };

    function draw(){
        requestAnimationFrame(draw);
        ctx.clearRect(0,0,canvas.width,canvas.height)
        if( particlesArray.length < count) {
            createParticle()
        }
        handleParticle()
    }
    requestAnimationFrame(draw);
</script>
</html>